<template>
	<div class="conPpageBox">
		<div class="homeOneCarousel">
			<el-carousel :interval="5000" arrow="always" height="550px">
				<el-carousel-item v-for="item in 4" :key="item">
					<img src="../../assets/images/bg-home-sports.jpg" alt="">
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- <div class="notic-bar"  @click="goNextPage('/personalMsg')">
				<div class="notice-img">
					<img src="../../assets/images/tongzhi.png" />
				</div>
				<div class="notice-bar-container">
					<div class="notice-bar__wrap">
						<span class="notice-bar__wrap_text">
							{{noticeCon.title}}
						</span>
					</div>
				</div>
		</div> -->
		<!-- <div class="gameBox">
			<div class="gameBoxTitle">
				<p>{{$t("indexTitle.title16")}}</p>
				<div class="gameBoxTitleRight">
					更多内容
					<img src="../../assets/images/jiantou.png" alt="">
				</div>
			</div>
			<div class="gameBoxList">
				<div class="gameBoxListIt" v-for="it in 25" :key="it">
					<div class="gameBoxListItCon">
						<div class="asdfads">
							<img src="../../assets/images/bg-home-sports.jpg" alt="">
							<div class="gameBoxListItHov">
								<div class="gameBoxListItHovBot">
									{{$t("indexTitle.title17")}}
								</div>
							</div>
						</div>
						<p>太空舰队</p>
					</div>
				</div>
			</div>
		</div> -->
		<div class="guochengBox">
			<div class="guochengBoxTi">
				欢迎来到 HK11
			</div>
			<div class="feature-list">
				<div class="feature-item">
					<h4>创建账户</h4>
				</div>
				<div class="feature-item">
					<h4>充值</h4>
				</div>
				<div class="feature-item">
					<h4>开始赚钱</h4>
				</div>
				<div class="feature-item">
					<h4>领取奖励</h4>
				</div>
			</div>
		</div>
		<div class="event-qmenu" :class="close ? 'close' : ''">
			<div class="handle" @click="close=!close">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 70">
					<path
						d="M0,1.3l0,67.4c0.5-1.3,1.2-2.6,1.9-3.8c2-3.3,4.2-5.7,8.4-9.6l1.5-1.4C19.3,47,22,42.8,22,35s-2.7-12-10.2-18.9c-0.2-0.2-1.2-1.1-1.5-1.4c-4.2-3.9-6.5-6.3-8.4-9.6C1.2,3.9,0.5,2.6,0,1.3L0,1.3z">
					</path>

				</svg>
				<img src="../../assets/images/jiantoudasd.png" alt="" v-if="close">
				<img src="../../assets/images/jiantouxxx.png" alt="" v-if="!close">
			</div>
			<div class="cont">
				<div class="event-item" @click="getNextPage('/mission')">
					<img src="../../assets/images/1.webp" alt="" />
				</div>
				<!-- <div class="event-item">
					<img src="../../assets/images/2.png" alt="" />
				</div> -->
				<div class="event-item" @click="getturo">
					<img src="../../assets/images/3.webp" alt="" />
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="turo" title="輪盤" :width="'375px'" class="endTruo" :center="true">
			<div class="wChild">
				<Turo v-if="turo" />
			</div>
		</el-dialog>
		<div class="end">
			<img width="100%" @click="zhuanpan()" src="../../assets/img/rilri.png" alt="">
			<!-- {{$t('indexTitle.title311')}} -->
			转盘
		</div>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		noticeList
	} from "../../utils/api.js"
	import Turo from '@/components/turo.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			Turo,
			loadingFour
		},
		data() {
			return {
				turo: false,
				navList: [{
					"title": this.$t("indexTitle.title6"),
					"img": require('../../assets/images/tiyu.webp')
				}, {
					"title": this.$t("indexTitle.title7"),
					"img": require('../../assets/images/zhenren.webp')
				}, {
					"title": this.$t("indexTitle.title8"),
					"img": require('../../assets/images/laohuji.webp')
				}, {
					"title": this.$t("indexTitle.title9"),
					"img": require('../../assets/images/qipai.webp')
				}, {
					"title": this.$t("indexTitle.title10"),
					"img": require('../../assets/images/buyu.webp')
				}, {
					"title": this.$t("indexTitle.title11"),
					"img": require('../../assets/images/dongwujingji.webp')
				}, {
					"title": this.$t("indexTitle.title12"),
					"img": require('../../assets/images/dianjing.webp')
				}, {
					"title": this.$t("indexTitle.title13"),
					"img": require('../../assets/images/caipiao.webp')
				}, {
					"title": this.$t("indexTitle.title14"),
					"img": require('../../assets/images/youhuihuodong.webp')
				}, {
					"title": this.$t("indexTitle.title15"),
					"img": require('../../assets/images/shoujixiazai.png')
				}],
				isSelShow: 0,
				close: true,
				isShowLang: false,
				noticeCon: {},
				noticeList: [],
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		created() {},
		mounted() {
			// this.getNoticeList()
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			zhuanpan(){
				if(!localStorage.getItem('token')){
					this.msgTextTow = this.$t('indexTitle.title294');
					this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
					// this.$message({
					// 	showClose: true,
					// 	message: this.$t('indexTitle.title294'),
					// 	type: 'error'
					// });
					return false
				}
				this.turo = true
			},
			getNextPage(page) {
				if (localStorage.getItem('token')) {
					this.$router.push(page)
				} else {
					this.$emit('getShowLogin', true)
				}
			},
			getturo() {
				if (localStorage.getItem('token')) {
					this.turo = true;
				} else {
					this.$emit('getShowLogin', true)
				}
			},
			getNoticeList() {
				this.noticeCon = {};
				this.noticeList = [];
				let that = this;
				let data = {}
				noticeList(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data.data);
						this.noticeCon = res.data.data[0];
						this.noticeList = res.data.data;
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			switchdNavIt(inde) {
				this.isSelShow = inde;
				console.log(inde);
			},
			getShowLang() {
				this.isShowLang = !this.isShowLang;
			},
			switchLang(lang) {
				this.$i18n.locale = lang;
				localStorage.setItem('language', lang)
				this.isShowLang = false;
				this.navList = [{
					"title": this.$t("indexTitle.title6"),
					"img": require('../../assets/images/tiyu.webp')
				}, {
					"title": this.$t("indexTitle.title7"),
					"img": require('../../assets/images/zhenren.webp')
				}, {
					"title": this.$t("indexTitle.title8"),
					"img": require('../../assets/images/laohuji.webp')
				}, {
					"title": this.$t("indexTitle.title9"),
					"img": require('../../assets/images/qipai.webp')
				}, {
					"title": this.$t("indexTitle.title10"),
					"img": require('../../assets/images/buyu.webp')
				}, {
					"title": this.$t("indexTitle.title11"),
					"img": require('../../assets/images/dongwujingji.webp')
				}, {
					"title": this.$t("indexTitle.title12"),
					"img": require('../../assets/images/dianjing.webp')
				}, {
					"title": this.$t("indexTitle.title13"),
					"img": require('../../assets/images/caipiao.webp')
				}, {
					"title": this.$t("indexTitle.title14"),
					"img": require('../../assets/images/youhuihuodong.webp')
				}, {
					"title": this.$t("indexTitle.title15"),
					"img": require('../../assets/images/shoujixiazai.png')
				}]
			},
			goNextPage(page) {
				if (!localStorage.getItem('token') && page == '/deposit' || !localStorage.getItem('token') && page ==
					'/withdraw') {
					this.$router.push('/login')
					return false;
				}
				this.$router.push(page)
			}
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.conPpageBox {
		background-color: #1a1a1a;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
	}

	/* 轮播图 */
	.homeOneCarousel {
		width: 100%;
		margin: 0px auto 0;
	}

	:deep(.homeOneCarousel .el-carousel__arrow) {
		width: 30px;
		height: 30px;
	}

	:deep(.homeOneCarousel .el-carousel__arrow:hover) {
		background-color: rgba(0, 0, 0, 0.7);
	}

	:deep(.homeOneCarousel .el-icon) {
		font-size: 20px;
		color: #a6abb5;
	}

	:deep(.homeOneCarousel .el-carousel__item img) {
		width: 100%;
	}

	:deep(.homeOneCarousel .el-carousel__indicators) {
		left: 50%;
		transform: translateX(-50%);
	}

	:deep(.homeOneCarousel .el-carousel__button) {
		width: 5px;
		height: 5px;
		border: none;
		border-radius: 50%;
		background-color: #292e3a;
	}

	:deep(.homeOneCarousel .is-active .el-carousel__button) {
		background: #fff;
	}

	:deep(.homeOneCarousel .el-carousel__container) {
		height: 100%;
	}

	/* 通知 */
	.notic-bar {
		width: 100%;
		margin: 0px auto;
		display: flex;
		background: #353535;
		align-items: center;
		height: 40px;
		padding: 5px 200px;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.notice-bar-container {
		display: flex;
		align-items: center;
		width: calc(100% - 30px);
		height: 35px;
		overflow: hidden;
		margin-left: 5px;
	}

	.notice-img {
		width: 25px;
		background-color: #ffffff;
		border-radius: 50%;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.notice-img img {
		width: 15px;
		height: 15px;
	}

	.notice-bar__wrap {
		margin-left: 10px;
		display: flex;
		align-items: center;
		animation: move 20s linear infinite;
		line-height: 35px;
		font-size: 15px;
		cursor: pointer;
		color: #fff;
	}

	.notice-bar__wrap_text {
		width: max-content;
		min-width: 100px;
	}

	.notice-bar__wrap:hover {
		animation-play-state: paused;
	}


	@keyframes move {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}


	.asdfads {
		width: 140px;
		height: 140px;
		background-color: #2b2b2b;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.asdfads img {
		width: 140px;
		height: 140px;
		border-radius: 5px;
	}

	.hezuohuoban {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.hezuohuoban img {
		width: auto;
		height: 30px;
		margin-top: 5px;
		margin-right: 5px;
	}

	.tiyuBox {
		width: 95%;
		margin: 0 auto 20px;
	}

	.tiyuBoxIt {
		width: 100%;
		margin-top: 10px;
		background-image: url('../../assets/images/beijingTow.png');
		height: 150px;
	}

	.tiyuBoxIt img {
		width: 100%;
		/* height: auto; */
		height: 150px;
		border-radius: 10px;
	}

	.zhenrenBox {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.zhenrenBoxIt {
		width: 49%;
		margin-top: 5px;
		background-image: url('../../assets/images/beijingTow.png');
		height: 115px;
	}

	.zhenrenBoxIt img {
		width: 90%;
		margin: 0px auto;
		/* height: 112px; */
		height: auto;
		border-radius: 10px;
	}

	.event-qmenu {
		bottom: 100px;
		height: auto !important;
		left: 0;
		min-height: auto !important;
		position: fixed;
		transition: .3s ease;
		width: 100px;
		z-index: 21;
	}

	.event-qmenu.close {
		transform: translateX(-73px);
	}

	.handle {
		bottom: 5px;
		height: 84px;
		position: absolute;
		right: 3px;
		width: 30px;
	}

	.handle img {
		bottom: 28px;
		position: absolute;
		right: 3px;
		width: 25px;
		height: 25px;
	}


	svg:not(:root) {
		overflow: hidden;
	}

	.event-qmenu .handle path {
		fill: #7240ff;
	}

	/* .handle::after {
		speak: none;
		color: #fff;
		content: "►";
		font-family: iconmps !important;
		font-size: 20px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		left: -2px;
		line-height: 1;
		position: absolute;
		text-align: center;
		text-shadow: 0 -1px 3px #4c0dff;
		text-transform: none;
		top: 50%;
		transform: translateY(-50%) rotate(180deg);
		width: 30px;
	} */

	.event-qmenu.close .handle::after {
		left: 0px;
		text-shadow: 0 1px 3px #4c0dff;
		transform: translateY(-50%) rotate(0deg);
	}

	@keyframes aqm {
		0% {
			box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
		}

		55% {
			box-shadow: 0 2px 4px #aa8dff;
		}

		70% {
			box-shadow: 0 2px 4px #bda6ff;
		}

		100% {
			box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
		}
	}

	.cont {
		align-items: center;
		animation: aqm 1.8s ease infinite;
		background-color: rgba(0, 0, 0, .8);
		border: 3px solid #7240ff;
		border-bottom-right-radius: 15px;
		border-left: 0;
		border-top-right-radius: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
		display: flex;
		flex-wrap: wrap;
		min-height: 103px;
		padding: 10px;
		width: 70px;
	}

	.event-item {
		align-items: center;
		display: flex;
		height: 50px;
		justify-content: center;
		margin: 5px 0;
		position: relative;
		transition: .3s ease;
		width: 50px;
	}

	.event-item img {
		display: block;
		max-height: 100%;
		max-width: 100%;
	}

	/* 轮播图 */
	:deep(.homeOneCarousel .el-carousel__arrow) {
		width: 70px;
		height: 70px;
	}

	:deep(.homeOneCarousel .el-carousel__arrow:hover) {
		background-color: rgba(0, 0, 0, 0.7);
	}

	:deep(.homeOneCarousel .el-icon) {
		font-size: 30px;
		color: #a6abb5;
	}

	:deep(.homeOneCarousel .el-carousel__item img) {
		width: 100%;
	}

	:deep(.homeOneCarousel .el-carousel__indicators) {
		left: 50%;
		transform: translateX(-50%);
	}

	:deep(.homeOneCarousel .el-carousel__button) {
		width: 10px;
		height: 10px;
		border: none;
		border-radius: 50%;
		background-color: #292e3a;
	}

	:deep(.homeOneCarousel .is-active .el-carousel__button) {
		background: #fff;
	}

	:deep(.homeOneCarousel .el-carousel__container) {
		height: 100%;
	}

	.homeTowCarousel {
		width: 100%;
		padding: 25px 100px;
		position: relative;
		box-sizing: border-box;
	}

	.jiantou {
		width: 40px;
		height: 40px;
		font-size: 30px;
		color: #fff;
		background-color: #5235ff;
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
	}

	.jiantou img {
		width: 20px;
		height: 20px;
	}

	.jiantouleft img {
		width: 20px;
		height: 20px;
		transform: rotate(-180deg);
	}

	.jiantouleft {
		position: absolute;
		top: 50%;
		left: 100px;
		transform: translateY(-50%);
	}

	.jiantouright {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 100px;
	}

	.navImgList {
		width: 100%;
		display: flex;
		height: 65px;
		align-items: center;
		gap: 10px;
		overflow-x: scroll;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.navImg {
		flex: 0 0 auto;
		height: 55px;
		margin-right: 10px;
	}

	.navImg img {
		width: 250px;
		cursor: pointer;
		border-radius: 10px;
		transition: .3s all;
		border: 1px solid #585962;
		height: 100%;
	}

	.navImg img:hover {
		width: 260px;
		height: 60px;
		border: 1px solid #8f0720;
	}


	/* 游戏 */
	.gameBox {
		width: 100%;
		padding: 0 200px;
		box-sizing: border-box;
	}

	.gameBoxTitle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-size: 20px;
	}

	.gameBoxTitleRight {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.gameBoxTitleRight img {
		width: 14px;
		height: 14px;
		margin-left: 5px;
	}

	.gameBoxList {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.gameBoxListIt {
		width: 12%;
		margin-right: 5px;
		color: #fff;
		font-size: 14px;
		margin-top: 15px;
	}

	.gameBoxListItCon {
		width: 100%;
	}

	.gameBoxListItCon p {
		margin: 0px;
	}

	.gameBoxListItCon .asdfads {
		position: relative;
		width: 100%;
		height: 140px;
	}

	.gameBoxListItCon .asdfads img {
		width: 100%;
		height: 140px;
		border-radius: 5px;
	}

	.gameBoxListItHov {
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 5px;
		z-index: 9;
		top: 0;
		display: none;
		transition: 2s all;
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.asdfads:hover .gameBoxListItHov {
		display: block;
	}

	.gameBoxListItHov .gameBoxListItHovBot {
		width: 80px;
		height: 30px;
		border-radius: 5px;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		line-height: 30px;
		transform: translate(-50%, -50%);
		z-index: 19;
		background: linear-gradient(#17eec9, #05c9c6);
	}

	.guochengBox {
		width: 100%;
		padding: 30px 100px;
		box-sizing: border-box;
	}

	.guochengBoxTi {
		color: #5235ff;
		font-size: 25px;
		font-weight: 700;
		margin-bottom: 20px;
		text-align: center;
		text-transform: uppercase;
	}

	.feature-list {
		display: flex;
		justify-content: space-between;
		padding: 0;
		position: relative;
	}

	.feature-list:before {
		background: linear-gradient(90deg, #19f0ca, #5235ff);
		bottom: 61px;
		content: "";
		height: 4px;
		left: 0;
		position: absolute;
		width: 100%;
	}

	.feature-list .feature-item {
		position: relative;
	}

	.feature-list .feature-item h4 {
		font-size: 14px;
		font-style: italic;
		font-weight: 700;
		line-height: 40px;
		text-align: center;
		text-transform: uppercase;
	}

	.feature-list .feature-item:first-of-type h4 {
		color: #19f0ca;
	}

	.feature-list .feature-item:nth-of-type(2) h4 {
		color: #60a9db;
	}

	.feature-list .feature-item:nth-of-type(3) h4 {
		color: #577ce6;
	}

	.feature-list .feature-item:nth-of-type(4) h4 {
		color: #5235ff;
	}

	.feature-list .feature-item:first-of-type h4:before {
		border-color: #19f0ca;
	}

	.feature-list .feature-item:nth-of-type(2) h4:before {
		border-color: #60a9db;
	}

	.feature-list .feature-item:nth-of-type(3) h4:before {
		border-color: #577ce6;
	}

	.feature-list .feature-item:nth-of-type(4) h4:before {
		border-color: #5235ff;
	}

	.feature-list .feature-item h4:before {
		background: #fff;
		border: 3px solid #fff;
		border-radius: 50%;
		content: "";
		display: block;
		height: 10px;
		left: calc(50% - 8px);
		position: relative;
		top: 3px;
		width: 10px;
	}

	.swiper {
		display: flex;
		align-items: center;
		width: 800px;
		overflow: hidden;
	}

	.watch-list-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.watch-list-arrow-btn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}

	.currency-items {
		display: flex;
		gap: 10px;
		overflow-x: scroll;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* &::-webkit-scrollbar {
	    display: none;
	  } */
	}

	.currency-item {
		flex: 0 0 auto;
		width: 100px;
		height: 100px;
		background-color: lightblue;
	}

	.end {
		width: 50px;
		height: 60px;
		position: fixed;
		top: 70%;
		right: 5%;
		cursor: pointer;
		color: #fff;
		cursor: pointer;
		text-align: center;
		z-index: 100;
		animation: moveUpAndDown 5s ease-in-out infinite;
		transform: all;
	}

	.end img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.endTruo /deep/ .el-dialog__header {
		background: #5235ff;
		color: #fff;
	}

	.endTruo /deep/ .el-dialog {
		margin-top: 10vh !important;
	}

	.endTruo /deep/ .el-dialog__title {
		background: #5235ff;
		color: #fff;
	}

	.endTruo /deep/ .el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}

	.wChild {
		width: 375px;
		overflow: hidden;
		height: 650px;
	}

	.endTruo /deep/ .el-dialog__body {
		padding: 0;
	}

	@keyframes moveUpAndDown {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-50%);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>